<template>
    <div class="sign-in">
      <section>
        <div id="empty-cart" class="empty-cart">
          <div class="message-title"><span></span></div>
          <p class="loginError c-txt-err" ref="loginError" v-show="loginError">Your username or password is
            incorrect.</p>
          <p class="confirmed c-txt-err" ref="confirmed" v-show="confirmed"></p>
          <p class="Register-error c-txt-err" ref="RegisterError" v-show="RegisterError">Your account has been
            registered, please log in directly</p>
          <div class="mo-openid-app-icons">
            <ul class="tabs">
              <li class="login-tab c-bdr-gray-clr" v-for="(item,index) in tabsParam"
                  @click="toggleTabs(index)"
                  :key="index"
                  :class="{active:index===nowIndex}">{{item.text}}
              </li>
            </ul>
            <div class="tab-contents" :class="{'fixed-input':isWriting}">
              <div v-show="nowIndex===0" class="tab-content login-content">
                <form id="login-form" @submit.prevent="checkLogin">
                  <fieldset>
                    <div class="t-pod">
                      <ul class="fieldset">
                        <li class="field highlight-error c-bdr-gray-lt">
                          <p class="loginEmail-error c-txt-err" ref="loginEmailError" v-show="loginEmailError"></p>
                          <div class="field-input-wrapper c-bdr-gray-lt">
                            <input class="field-input" placeholder="Email" type="text"
                                   name="email" v-model="loginEmail" @focus="LoseOne" id="login-email-input">
                            <i v-show="loginEmail" @click="clearEmail" class="off-input material-icons"></i>
                          </div>
                        </li>
                        <li class="field highlight-error active"
                            style="margin-bottom: 0">
                          <p class="loginPassword-error c-txt-err" ref="loginPasswordError"
                             v-show="loginPasswordError"></p>
                          <div class="field-input-wrapper c-bdr-err">
                            <input class="field-input" placeholder="Password" type="password" v-model="loginPassword"
                                   id="login-password-input" @focus="LoseOne">
                            <div class="inline-toggle" @click="inline(0)" id="loginSHOW">SHOW</div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <a class="forgot-password" @click="restPassword">Forgot password? </a>
                    <div class="touch-submit-container">
                      <input class="c-txt-white t-button btn-cta" id="sign-in" type="submit" value="Sign In"
                             ref="login">
                    </div>
                  </fieldset>
                </form>
                <div data-v-19df5189="" data-bhw="SocialMediaSignup" data-bhw-path="TabbedLoginPage|SocialMediaSignup"
                     class="social-container ">
                  <div data-v-19df5189="" class="social-buttons-container">
                    <div data-v-19df5189="" data-bhw="FacebookLogin"
                         data-bhw-path="TabbedLoginPage|SocialMediaSignup|FacebookLogin" class="facebook-login"
                         @click="facebookLogin">
                      <div data-v-19df5189="" tabindex="0" class="facebook-login-button">
                        <div data-v-19df5189="" class="custom-icon-facebook"></div>
                        <div data-v-19df5189="" class="facebook-button-text">
                          <span data-v-19df5189="" class="text-facebook">Facebook</span>
                        </div>
                      </div>
                    </div>
                    <div data-v-19df5189="" data-bhw="GoogleLoginButton" tabindex="0" role="button"
                         data-bhw-path="TabbedLoginPage|SocialMediaSignup|GoogleLoginButton"
                         class="google-signin-button" @click="googleLogin">
                      <div data-v-19df5189="" class="google-icon-block">
                        <span data-v-19df5189="" class="icon-google-signin"></span></div>
                      <div data-v-19df5189="" class="google-button-text"><span data-v-19df5189="" class="text-google">
                          Google
                        </span></div>
                    </div>
                  </div>
                </div>
                <p class="secure-servers">
                    <span class="icon-lock">
                      <i class="material-icons lock"></i>
                      Sign up using Meet50off’s secure servers
                    </span>
                </p>
              </div>
              <div v-show="nowIndex===1" class="tab-content signup-content">
                <form id="signup-form" @submit.prevent="checkRegister" name="form">
                  <fieldset>
                    <ul class="ls-cf unstyled">
                      <div class="t-pod">
                        <ul class="fieldset" :class="{'fixed-input1':isWritingSignUp1}" @click.stop="">
                          <li class="field highlight-error c-bdr-gray-lt" id="field-signup-fullName-input">
                            <p class="upname-error c-txt-err" ref="upnameError" v-show="upnameError"></p>
                            <div class="field-input-wrapper c-bdr-gray-lt">
                              <input class="field-input" placeholder="Full name" id="signup-fullName-input" type="text"
                                     name="full_name" v-model="upname" @blur="upnameReg" @focus="LoseTwo1" @input="onQueryChange(upname)"/>
                              <i @click="clearName" v-show="upname" class="off-input material-icons"></i>
                            </div>
                          </li>
                          <li class="field highlight-error c-bdr-gray-lt" id="field-signup-email-input">
                            <p class="upemail-error c-txt-err" ref="upemailError" v-show="upemailError"></p>
                            <div class="field-input-wrapper c-bdr-gray-lt">
                              <input class="field-input" placeholder="Email" id="signup-email-input" type="text"
                                     data-bhc="email:email" name="email" v-model="upemail" @blur="upemailReg" @focus="LoseTwo1"/>
                              <i @click="clearEmail" v-show="upemail" class="off-input material-icons"></i>
                            </div>
                          </li>
                          <li class="field highlight-error" id="field-signup-password-input" >
                            <p class="uppassword-error c-txt-err" ref="uppasswordError" v-show="uppasswordError"></p>
                            <div class="field-input-wrapper c-bdr-gray-lt">
                              <input class="field-input" placeholder="Password" id="signup-password-input"
                                     type="password" v-model="uppassword" @blur="uppasswordReg" @input="uppasswordWatch" @focus="LoseTwo2"/>
                              <div class="inline-toggle" @click="inline(1)" id="signupSHOW">SHOW</div>
                            </div>
                          </li>
                          <li class="Prompt" v-show="Prompt">
                            <ul style="color: #747474">
                              <li class="Prompt-title">Your password must have</li>
                              <li>
                                <i class="Prompt-icon1-s" v-show="length"></i>
                                <i class="Prompt-icon1-h" v-show="!length"></i>
                                8 or more characters
                              </li>
                              <li>
                                <i class="Prompt-icon2-s" v-show="lowercase"></i>
                                <i class="Prompt-icon2-h" v-show="!lowercase"></i>
                                lowercase letters
                              </li>
                              <li>
                                <i class="Prompt-icon3-s" v-show="num"></i>
                                <i class="Prompt-icon3-h" v-show="!num"></i>
                                At least one number
                              </li>
                            </ul>
                          </li>
                          <li class="field highlight-error" id="field-signup-acceptTerms-input">
                            <p class="acceptTerms-error c-txt-err" ref="acceptTermsError" v-show="acceptTermsError"></p>
                            <input id="signup-acceptTerms-input" type="checkbox" name="accept_terms" value="1"
                                   ref="acceptTerms"
                                   autocomplete="off" @click="checkbox">
                            <label for="signup-acceptTerms-input">
                              I agree to the
                              <router-link tag="i" to="/terms-and-conditions" style="font-style: normal">
                                <a data-bhc="link:terms" href="/">Terms of Use</a>
                              </router-link>
                              &amp;
                              <router-link tag="i" to="/privacy-policy" style="font-style: normal">
                                <a data-bhc="link:privacy" href="/">Privacy Statement</a>.
                              </router-link>
                            </label>
                          </li>
                        </ul>
                      </div>
                    </ul>
                    <div class="touch-submit-container" data-bhc="button:submit-signup"
                         data-bhc-path="TabbedLoginPage|SignupForm|button:submit-signup">
                      <input class="c-txt-white t-button btn-cta submit-trigger" ref="termsLink" name="submit"
                             type="submit" value="Sign Up">
                    </div>
                  </fieldset>
                </form>
                <div class="social-container " data-bhw="SocialMediaSignup"
                     data-bhw-path="TabbedLoginPage|SocialMediaSignup">
                  <div class="social-buttons-container">
                    <div class="facebook-login" data-bhw="FacebookLogin"
                         data-bhw-path="TabbedLoginPage|SocialMediaSignup|FacebookLogin" @click="facebookLogin">
                      <div class="facebook-login-button" tabindex="0">
                        <div class="custom-icon-facebook"></div>
                        <div class="facebook-button-text">
                    <span class="text-facebook">
                      Facebook
                    </span>
                        </div>
                      </div>
                    </div>
                    <div class="google-signin-button" data-bhw="GoogleLoginButton" tabindex="0" role="button"
                         data-bhw-path="TabbedLoginPage|SocialMediaSignup|GoogleLoginButton" @click="googleLogin">
                      <div class="google-icon-block">
                        <span class="icon-google-signin"></span>
                      </div>
                      <div class="google-button-text">
                          <span class="text-google">
                            Google
                          </span>
                      </div>
                    </div>
                  </div>
                </div>
                <p class="secure-servers">
                    <span class="icon-lock">
                      <i class="material-icons lock"></i>
                      Sign up using Meet50off’s secure servers
                    </span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <router-view></router-view>
    </div>
</template>

<script type="text/ecmascript-6">
  import hello from 'hellojs/dist/hello.all.js'
  import {loginByUsername, postAccessToken} from 'api/login'
  import {Register} from 'api/register'
  import {getToken, setToken, removeToken} from 'common/js/token/auth'
  import {mapActions, mapMutations, mapGetters} from 'vuex'
  import {searchMixin} from 'common/js/mixin'
  import monitoring from '../../common/js/monitoring';
  // import CollapseTransition from 'common/js/collapse-transition'
  export default {
    mixins: [searchMixin],
    data() {
      return {
        tabsParam: [{
          text: 'Sign In',
          path: 'sign-in'
        }, {
          text: 'Sign Up',
          path: 'sign-up'
        }],
        nowIndex: 0,
        upname: '',
        uppassword: '',
        upemail: '',
        loginPassword: '',
        loginEmail: '',
        loginPasswordError: false,
        loginEmailError: false,
        confirmed: false,
        uppasswordError: false,
        upemailError: false,
        upnameError: false,
        acceptTermsError: false,
        loginError: false,
        RegisterError: false,
        Registers: [],
        Logintoken: [],
        length: true,
        lowercase: true,
        num: true,
        Prompt: false,
        token: '',
        email: '',
        isWriting:false,
        isFocusSignIn : false,
        screenHeight: document.documentElement.clientHeight,        //此处也可能是其他获取方法
        originHeight: document.documentElement.clientHeight,
        isWritingSignUp1 : false,
        isFocusSignIn1 : false,
      }
    },
    created() {
      monitoring.openLogin();//todo Facebook Pixel & Google Analytic Code    openLogin
      const param = this.$route.params.signup
      if (param) {
        this.toggleTabs(1)
      }
    },
  mounted() {
      hello.init({
        // google: '909861172321-a23nkeulc89l1ivattpadhq7hvcisht0.apps.googleusercontent.com', // localhost
        // google: '909861172321-570om8ub9rehrqss4c54sbkqka2dl482.apps.googleusercontent.com',     // test meet50off
        google: '909861172321-ajb3ab3n4e9st4lr6t6tcvk2dvf2e3m3.apps.googleusercontent.com',  //   pro
        facebook: '423178231477250'
      }, {
        // Define the OAuth2 return URL
        // This can be anything you like, as long as its the callback associated with the your provider-app client id.
        // It could even be localhost, e.g. http://localhost/somepath as phonegap is not run from a domain so SameOrigin breaks,
        // instead we take advantage of being able to read the popups URL in PhoneGap redirect_uri: 'https://adodson.com/hello.js/redirect.html'
        // redirect_uri: 'http://localhost:9000/sign-in/redirect',
        redirect_uri: 'https://meet50off.com/sign-in/redirect'
      });
        let self = this;
        window.onresize = function() {
          return (function(){
            self.screenHeight = document.documentElement.clientHeight;
          })()
        }
    },
    computed: {
      ...mapGetters([
        'signUpVal',
        'userShow'
      ])
    },
    methods: {
      restPassword() {
        this.$router.push({
          path: `/forgot-password`
        });
      },
      upnameReg() {
        if (this.upname.length < 1) {
          this.upnameError = true
          this.$refs.termsLink.disabled = "disabled"
          this.$refs.upnameError.innerHTML = 'Please enter your full name.'
          return false
        }
      },
      upemailReg() {
        if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(this.upemail)) {
          this.upemailError = true
          this.$refs.termsLink.disabled = "disabled"
          this.$refs.upemailError.innerHTML = 'Please enter a correct email address.'
          return false
        }
      },
      uppasswordReg() {
        this.Prompt = false
        this.uppasswordWatch()
      },
      LoseOne() {
        this.isFocusSignIn = true
      },
      LoseTwo1() {
        this.isFocusSignIn1 = true
        this.Prompt = false
      },
      LoseTwo2() {
        this.isFocusSignIn1 = true
      },
      Lose() {
        this.Prompt = true
      },
      uppasswordWatch() {
        this.checkPasswordVaild = true
        this.lowercase = false
        if (!/[a-z]/.test(this.uppassword.trim())) {
          this.lowercase = true
          this.checkPasswordVaild = false
        }
        this.length = false
        if (!/.{8,}/.test(this.uppassword.trim())) {
          this.length = true
          this.checkPasswordVaild = false
        }
        this.num = false
        if (!/[0-9]/.test(this.uppassword.trim())) {
          this.num = true
          this.checkPasswordVaild = false
        }
        if (!this.checkPasswordVaild) {
          this.Prompt = true
          return false
        }
        this.$refs.termsLink.disabled = ""
        return true
      },
      checkbox() {
        if (!this.$refs.acceptTerms.checked) {
          this.acceptTermsError = true
          this.$refs.acceptTermsError.innerHTML = 'Please check accept terms checkbox.'
          return false
        } else if (this.$refs.acceptTerms.checked) {
          this.acceptTermsError = false
        }
        return true
      },
      checkLogin() {
        if (this.loginEmail.length < 1) {
          this.loginEmailError = true
          this.$refs.login.disabled = "disabled"
          this.$refs.loginEmailError.innerHTML = 'Please enter the mailbox to log in.'
          return false
        }
        monitoring.login({"loginEmail":this.loginEmail});//todo Facebook Pixel & Google Analytic Code    login
        if (this.loginPassword.length < 1) {
          this.loginPasswordError = true
          this.$refs.login.disabled = "disabled"
          this.$refs.loginPasswordError.innerHTML = 'Please enter the password in the login.'
          return false
        }
        this.$store.dispatch('LoginByUsername', {
          username: this.loginEmail.trim(),
          password: this.loginPassword.trim()
        }).then((res) => {
          if (res) {
            this.setUserShow(true)
            this.GetUserInfo()
            setTimeout(()=> {
              let redirect = decodeURIComponent(this.$route.query.redirect || '/');
              this.$router.push({
                path: redirect,
                query: {from: 'login'}
              });//登录成功之后重定向到首页
            },180)
          }
        }).catch(err => {
          if (err.status === 400) {
            this.confirmed = true
            this.$refs.confirmed.innerHTML = 'You must have a confirmed email to log in.'
          } else if (err) {
            return this.loginError = true
          }
        })
      },
      checkRegister() {
        this.upnameReg()
        this.upemailReg()
        this.uppasswordWatch()
        if (!this.checkbox()) {
          return
        }
        Register(this.upname.trim(), this.upemail.trim(), this.uppassword.trim()).then(() => {
          this.setUpemail(this.upemail)
          this.RegisterError = false
          this.$router.push({
            path: `/sign-in/email-activation`
          });
        }, err => {
          if (err.status === 400) {
            this.RegisterError = true
          }
        })
      },
      clearName() {
        this.upname = ''
      },
      clearEmail() {
        this.upemail = ''
        this.loginEmail = ''
      },
      toggleTabs(index) {
        this.nowIndex = index;
      },
      inline(el) {
        if (el) {
          let signuppassword = document.getElementById('signup-password-input')
          let signupSHOW = document.getElementById('signupSHOW')
          if (signuppassword.type == "password") {
            signuppassword.type = 'text'
            signupSHOW.innerHTML = 'HIDE'
          } else {
            signuppassword.type = 'password'
            signupSHOW.innerHTML = 'SHOW'
          }
        } else {
          let loginpassword = document.getElementById('login-password-input')
          let loginSHOW = document.getElementById('loginSHOW')
          if (loginpassword.type == "password") {
            loginpassword.type = 'text'
            loginSHOW.innerHTML = 'HIDE'
          } else {
            loginpassword.type = 'password'
            loginSHOW.innerHTML = 'SHOW'
          }
        }
      },
      //第三方登录
      googleLogin() {
        monitoring.googleLogin();//todo Facebook Pixel & Google Analytic Code    googleLogin
        const _this = this
        setTimeout(()=> {
          this.login('google', function (result) {
            var token = result.authResponse.access_token;
            // this.authenticate('google', token).then(function (token) { serverToken = token; });
            _this.token = token
          })
        },200)
      },
      facebookLogin() {
        monitoring.facebookLogin();//todo Facebook Pixel & Google Analytic Code    facebookLogin
        const _this = this
        setTimeout(()=> {
          this.login('facebook', function (result) {
            var token = result.authResponse.access_token;
            // this.authenticate('google', token).then(function (token) { serverToken = token; });
            _this.token = token
          })
        },200)
      },
      // loginByUsername() {
      //   this.$store.dispatch('LoginByUsername', this.loginForm).then((res) => {
      //     console.log(this.$route)
      //     let redirect = decodeURIComponent(this.$route.query.redirect || '/');
      //     this.$router.push({
      //       path: redirect
      //     })
      //   })
      // },
      // logout() {
      //   this.LogOut().then(res => {
      //     console.log(res)
      //   })
      // },
      log(r) {
        console.log(JSON.stringify(r));
      },
      login(network, callback) {
        const _this = this
        var hi = hello(network);
        hi.login({scope: 'email'}).then(function (r) {
          console.log(JSON.stringify(r));
          callback(r);
          return hi.api('me');
        }).then(function (data) {
          if (network === 'google') {
            _this.email = data.emails[0].value
          } else if (network === 'facebook') {
            _this.email = data.email
          } else {
            return
          }
          _this.setLoading(true)
          postAccessToken(network, _this.token, _this.email).then(res => {
            _this.$store.commit('SET_TOKEN', res)
            setToken(res)
            _this.GetUserInfo()
            _this.setLoading(false)
            let redirect = decodeURIComponent(_this.$route.query.redirect || '/');
            _this.$router.push({
              path: redirect,
              query: {from: 'login'}
            })
          })
        }, function (err) {
          console.log(JSON.stringify(err))
        });
      },
      ...mapActions([
        'LoginByUsername',
        'LoginByThirdParty',
        'GetUserInfo'
      ]),
      ...mapMutations({
        setUpemail: 'SET_UPEMAIL',
        setSignUpVal: 'SET_SIGNUP_VAL',
        setLoading: 'SET_ROUTE_LOADING',
        setUserShow: 'SET_USER_SHOW'
      })
    },
    watch: {
      screenHeight (val) {
          if(this.originHeight > val + 100) {//加100为了兼容华为的返回键
            if(this.isFocusSignIn) {
              this.isWriting = true;
            }else if(this.isFocusSignIn1){
              this.isWritingSignUp1 = true
            }
          }else{
            if(this.isFocusSignIn) {
              this.isWriting = false
              this.isFocusSignIn =false
              document.getElementById('login-email-input').blur()
              document.getElementById('login-password-input').blur()
            }else{
              this.isFocusSignIn1 = false
              this.isWritingSignUp1 = false
              document.getElementById('signup-fullName-input').blur()
              document.getElementById('signup-email-input').blur()
              document.getElementById('signup-password-input').blur()
            }
          }
      },
      loginEmail: function (loginEmail) {
        if (loginEmail !== '') {
          this.loginEmailError = false
          this.$refs.login.disabled = ""
          this.confirmed = false
          this.loginError = false
          return
        }
      },
      loginPassword: function (loginPassword) {
        if (loginPassword !== '') {
          this.loginPasswordError = false
          this.$refs.login.disabled = ""
          this.confirmed = false
          this.loginError = false
          return
        }
      },
      upname: function (upname) {
        if (upname !== '') {
          this.upnameError = false
          this.RegisterError = false
          this.$refs.termsLink.disabled = ""
          return
        } else {
          this.$refs.termsLink.disabled = "disabled"
        }
      },
      upemail: function (upemail) {
        if (/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(upemail)) {
          this.upemailError = false
          this.RegisterError = false
          this.$refs.termsLink.disabled = ""
          return
        } else {
          this.$refs.termsLink.disabled = "disabled"
        }
      },
      uppassword: function (uppassword) {
        if (!/^(?=.*[a-z])(?=.*\d)[a-z\d]{8,}$/.test(uppassword)) {
          this.$refs.termsLink.disabled = "disabled"
          //
        } else {
          this.$refs.termsLink.disabled = ""
        }
      },
      nowIndex: function (nowIndex) {
        if (nowIndex === 0) {
          this.uppasswordError = false
          this.upemailError = false
          this.upnameError = false
          this.acceptTermsError = false
          this.confirmed = false
          this.RegisterError = false
          this.Prompt = false
        } else if (nowIndex === 1) {
          this.loginPasswordError = false
          this.loginEmailError = false
          this.loginError = false
        }
      },
      '$route'(to, from) {
        if (to.path === '/sign-in') {
          this.toggleTabs(this.signUpVal);
        } else if (from.path === '/sign-in') {
          this.setSignUpVal(0)

        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"
  #login-password-input
    margin-right 1rem

  #signup-password-input
    margin-right 1rem

  .c-txt-err
    color: #ff2552 !important
    padding-left 10px
    font-size: 14px;

  .Prompt-title
    color: #000

  .Prompt
    border 0 !important

  .Prompt li
    margin-bottom 0.8rem !important
    font-size 13px
    padding-left 5px
    border 0 !important

  .Prompt-icon1-s
    background-image url("./correct-1.png")
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 17px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    padding-right 10px

  .Prompt-icon1-h
    background-image url("./correct-2.png")
    background-position: 0 0;
    background-repeat: no-repeat;
    width: 17px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    padding-right 10px

  .Prompt-icon2-s
    background-image url("./correct-1.png")
    background-position 0 0
    background-repeat: no-repeat;
    width: 17px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    padding-right 10px

  .Prompt-icon2-h
    background-image url("./correct-2.png")
    background-position 0 0
    background-repeat: no-repeat;
    width: 17px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    padding-right 10px

  .Prompt-icon3-s
    background-image url("./correct-1.png")
    background-position 0 0
    background-repeat: no-repeat;
    width: 17px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    padding-right 10px

  .Prompt-icon3-h
    background-image url("./correct-2.png")
    background-position 0 0
    background-repeat: no-repeat;
    width: 17px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    padding-right 10px

  .loginError
    text-align center

  .confirmed
    text-align center

  .Register-error
    text-align center

  .loginEmail-error
    position absolute
    top: -21px

  .loginPassword-error
    position absolute
    top: -216px

  .upname-error
    position absolute
    top: -21px

  .upemail-error
    position absolute
    top: -21px

  .uppassword-error
    position: absolute;
    top: -18px;

  .acceptTerms-error
    position: absolute;
    top: -21px

  .sign-in
    margin auto
    z-index: 111
    width: 520px
    background: $color-white
    margin-bottom: 75px;

  .cart-header
    background-color #18823a

  .back
    position absolute
    top: 0
    left: 6px
    z-index: 50
    .cart-left-large:before
      content: '\e314'
    .cart-left-large
      display: block
      padding: 10px
      font-size: $font-size-large-x
      color: $color-white

  .t-header-headline
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1em;
    overflow: hidden;
    padding: 12px 0;
    margin: 0 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    -webkit-font-smoothing: antialiased;

  #empty-cart
    line-height: normal;
    text-align: center;
    padding: 0 27px;

  .message-title
    margin: 3rem auto 2.5rem

  .message-title span
    background-image url("./meet.jpg")
    background-repeat no-repeat
    background-position center center
    background-size: 230px;
    width: 100%;
    height: 2.6rem;
    display: inline-block;

  .tabs
    overflow: auto;
    clear: both;

  .tabs li
    border-radius: 0;
    border-style: solid;
    border-width: 0 0 2px;
    cursor: pointer;
    float: left;
    height: 3.1rem
    color: #000
    line-height: 3.1rem
    text-transform: uppercase;
    width: 50%;
    font-size: 16px

  fieldset
    border: none;
    margin: 0;
    padding: 0;
    min-width: 0;
    position relative

  .c-bdr-gray-clr
    border-color: #d5d8db

  .c-txt-white
    color $color-white !important;

  .tabs li.active
    border-color: #18823a !important;
    border-width: 0 0 3px;

  .login-content li
    text-align: left;
    background-color: #fff;
    margin-bottom: 25px;
    position: relative;
    width: 100%;

  .login-content input
    color: #000;
    float: left;
    outline: none
    height: 3.5rem
    padding-left: 12px;
    font-size 16px
  .t-pod
    .fixed-input1
      width:calc(100vw - 53px)
      position:fixed
      left:27px;
      bottom: -2.7rem
      background #fff
  .t-pod ul
    li
      background: $color-white;
      border: 1px solid #b2b2b2;
      position: relative;
  .field-input-wrapper input
    flex: 9

  .field-input-wrapper
    border-radius: 2px;
    border-style: solid;
    display flex
  .off-input
    position absolute
    right: 15px;
    top: 20px;
    font-size: 22px;
    color: $color-dialog-background
    background url("../../../static/img/close.svg") no-repeat
    width: 17px;
    height: 16px;
  /*.tab-content*/
  /*display none*/
  /*.tab-content.active*/
  /*display: block;*/
  .mo-openid-app-icons
    .fixed-input
      width: calc(100vw - 55px);
      position: fixed
      bottom: -9rem
      left: 27px
      background: #fff;
  .tab-contents form
    margin-top 25px

  .forgot-password
    float: right;
    margin: 11px 0 14px;
    font-size: 14px;
    color: #369ec1

  .touch-submit-container
    display: inline-block;
    width: 100%;

  .t-button
    min-height: 3.5rem;
    background: #18823a;
    border: 0;
    color: #fff;
    display: inline-block;
    font-size: $font-size-large-x0 !important
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    border-radius: 2px;
    padding-right 0 !important
    width: 100%;
    padding-left 0 !important
    -webkit-appearance: none;

  .inline-toggle
    padding-right: 13px;
    color: #a5a8ab;
    font-size: 14px;
    line-height: 3.5rem;
    vertical-align: middle;

  .social-container
    margin-top: 1.6rem
    position: relative;

  .social-buttons-container
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;

  .facebook-login
    -ms-flex: 1;
    flex: 1;

  .facebook-login-button
    height: 3.5rem
    border-radius: 2px;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    width: 100%;
    display: flex;
    color: #fff;
    background: #3b5998;
    transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;

  .custom-icon-facebook
    width: 3.5rem
    height: 3.5rem;
    background-size: 30px 30px;
    background-position: 9px 8px;
    position: absolute;
    background: url(https://www2.Grouponcdn.com/user_sessions/assets/facebook-FB-f-Logo__white_512-03ae748004.png) no-repeat;
    background-size: 45px 40px
    background-position: 9px 8px;

  .facebook-button-text
    width: 100%;

  .text-facebook
    line-height: 3.5rem;
    font-size: 16px;
    padding-left: 3.4rem;

  .google-signin-button
    display: -ms-flexbox;
    display: flex;
    background: #4285f4;
    color: #fff;
    height: 3.5rem
    border-radius: 2px;
    -ms-flex: 1;
    flex: 1;
    margin-left: 15px;
    transition: background-color .2s ease-out, border-color .2s ease-out, color .2s ease-out;
    .google-icon-block
      border: none;
      position: relative;
    .icon-google-signin
      width: 3.2rem
      height: 3.29rem
      position: absolute;
      top: 2px;
      left: 2px;
      background: url(https://www2.Grouponcdn.com/user_sessions/assets/google-logo_googleg_48dp@3x-8305fa97a6.png) no-repeat;
      background-position: 10px 10px;
      background-size: 30px 30px;
      background-color: #fff;

  .google-button-text
    padding-left: 3.7rem
    width: 100%;
    font-weight: 600;

  .text-google
    line-height: 3.29rem
    font-size: 16px;

  .secure-servers
    color: #75787b;
    font-size: 10px;
    margin: 1rem 0 10px;

  .icon-lock
    color: #75787b;
    font-size: 10px;
    .lock
      vertical-align middle
      background url("../../../static/img/lock.svg") no-repeat
      width: 13px;
      background-size: 12px;
      height: 15px;
      display: inline-block;
  .inline-clear
    bottom: 0;
    color: #a5a8ab;
    display: none;
    font-size: 12px;
    line-height: 3.5rem
    position: absolute;
    right: 13px;

  .signup-content li
    text-align: left;
    background-color: #fff;
    margin-bottom: 1.5rem;
    position: relative;

  .signup-content input
    color: #000;
    float: left;
    outline none
    height: 3.5rem
    padding-left: 12px;
    font-size 14px

  #field-signup-acceptTerms-input
    border: none
    color: #000
    text-align: left;
    position: relative;
    font-size: 14px;

  #field-signup-acceptTerms-input a
    color: #369ec1

  #field-signup-acceptTerms-input label
    display: block;
    line-height: 17px;
    padding-left: 22px;
    position: relative;

  #field-signup-acceptTerms-input input
    opacity: 0;
    position: absolute;

  #field-signup-acceptTerms-input input[type=checkbox]:checked + label:before
    background-color: #18823a;
    border-radius: 2px;
    border: 1px solid #18823a;
    content: "";
    height: 15px;
    left: 0;
    position: absolute;
    width: 15px;

  #field-signup-acceptTerms-input input[type=checkbox] + label:before
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid #18823a;
    content: "";
    height: 15px;
    left: 0;
    position: absolute;
    width: 15px;

  #field-signup-acceptTerms-input input[type=checkbox] + label:after
    color: #fff;
    content: url(../../../static/img/mark.svg);
    font-family: Meet50off;
    font-size: 1em;
    height: 15px;
    left: 0;
    margin: .05em;
    position: absolute;
    text-align: center;
    width: 15px;
    top: 0;

  input::-webkit-input-placeholder
    color: #ddd;

  input::-moz-placeholder /* Mozilla Firefox 19+ */
    color: #ddd;

  input:-moz-placeholder /* Mozilla Firefox 4 to 18 */
    color: #ddd;

  input:-ms-input-placeholder /* Internet Explorer 10-11 */
    color: #ddd;
</style>
